<script>
/**
 * @desc 类型百分百
 */

import { wayMap } from '@/utils'

export default {
  name: 'type-percent-item',

  props: {
    typeIndex: {
      type: Number,
      default: 0
    },
    way: {
      type: Number,
      default: 0
    },
    money: {
      type: Number,
      default: 0
    },
    percent: {
      type: Number,
      default: 0
    }
  },

  computed: {
    ico() {
      return wayMap[this.typeIndex][this.way].ico
    },
    typeName() {
      return wayMap[this.typeIndex][this.way].text
    },
    moneyText() {
      return `${this.typeIndex ? '-' : '+'}${this.money.toFixed(2)}`
    }
  }
}
</script>

<template>
  <div :class="$sty.container">
    <img
      :class="$sty.ico"
      :src="ico"
      alt
      mode="aspectFill"
    >
    <div :class="$sty.content">
      <p :class="$sty.infoBar">
        <span :class="$sty.typeName">{{typeName}}</span>
        <span :class="$sty.percent">{{percent}}%</span>
        <span :class="[$sty.money, typeIndex ? $sty.red : $sty.green]">{{moneyText}}</span>
      </p>
      <div
        :class="$sty.line"
        :style="{width:percent+'%'}"
      ></div>
    </div>
  </div>
</template>

<style lang="scss" module>
@import './styles.scss';
</style>
